<template>
	<view class="item">
		<view class="left">
			<image class="img"  v-if="data.images" :src="data.itemImg" mode=""></image>
			<image v-else class="img" src="../../../../static/img/defaultImg.png" mode=""></image>
			<!-- <image src="../../../../static/img/goIcon.png" mode=""></image> -->
		</view>
		<view class="mid">
			<view class="content">
				<view class="text">
					<text class='p'>{{$t('components.adjustItem.5q5bq3j7nq80')}}</text>
					<text class='msg'>{{data.styleNo}}</text>
				</view>
				<view class="text">
					<text class='p'>{{$t('components.adjustItem.5q5bq3j7p640')}}</text>
					<text class='msg'>{{data.billNo}}</text>
				</view>
				<view class="text">
					<text class='p'>{{$t('components.adjustItem.5q5bq3j7pew0')}}</text>
					<text class='msg'>{{data.num}}</text>
				</view>
			</view>
			
		</view>
		<view class="right">
			<view class="content">
				<view class="text">
					<text class='p'>{{$t('components.adjustItem.5q5bq3j7pl80')}}</text>
					<text class='msg'>{{data.styleName}}</text>
				</view>
				<view class="text">
					<text class='p'>{{$t('components.adjustItem.5q5bq3j7pp80')}}</text>
					<text class='msg'>{{data.customerName}}</text>
				</view>
				<view class="text">
					<text class='p'>{{$t('components.adjustItem.5q5bq3j7pu00')}}</text>
					<text class='msg'>{{data.orderDate}}</text>
				</view>
			</view>
		</view>
		<view class="goIcon" @click="jumpTo">
			<image src="../../../../static/img/goIcon.png" mode=""></image>
		</view>
	</view>
</template>

<script>

	export default {
		props:{
			data: Object,
		},
		data() {
			return {
				
			}
		},
		mounted() {
			// console.log(this.data)
		},
		methods:{
			jumpTo() {
				//data.id
				this.$emit('jumpTo', this.data)
			}
		}
	}
</script>

<style lang="scss">
	.item {
		display: flex;
		width: 96%;
		margin-left: 2%;
		justify-content: space-between;
		height: 180rpx;
		background-color: #ffffff;
		margin-top: 2%;
		position: relative;
		// &:not(:first-child) {
			
		// }
		.left {
			flex: 0 0 180rpx;
			border-radius: 8px;
			overflow: hidden;
			.img {
				width: 120rpx;
				height: 120rpx;
				top: 50%;
				left: 50%;
				border-radius: 50%;
				margin-top: -60rpx;
				margin-left: -60rpx;
			}
		}
		.mid {
			flex: 0 0 240rpx;
			.content {
				padding: 18rpx 0 18rpx 0rpx;
				.text {
					font-family: AlibabaPuHuiTi;
					font-size: 18rpx;
					line-height: 45rpx;
					letter-spacing: 0px;
					height: 45rpx;
					width: 200rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					.p {
						color: #333333;
						font-weight: 500;
					}
					.msg {
						color: #585858;
						font-weight: normal;
					}
				}
			}
		}
		.right {
			flex: 1;
			.content {
				padding: 18rpx 0rpx;
				.text {
					font-family: AlibabaPuHuiTi;
					font-size: 18rpx;
					line-height: 45rpx;
					letter-spacing: 0px;
					height: 45rpx;
					width: 200rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					.p {
						color: #333333;
						font-weight: 500;
					}
					.msg {
						color: #585858;
						font-weight: normal;
					}
				}
			}
		}
		.goIcon {
			position: absolute;
			right: 10rpx;
			top: 50%;
			margin-top: -15rpx;
			image {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
</style>